import { Button, Space } from "antd";
import { PlusOutlined } from "@ant-design/icons";
import AddContent from "@/components/addContent/index.tsx";
import { changeDrawerState } from "@/store/modules/themeStore";
import { useAppDispatch, useAppSelector } from "@/store/hook.ts";
import { VideoIcon } from "@/components/icon/index.tsx";
import styles from "@/assets/styles/modules/fnbox.module.scss";
import { useNavigate } from "react-router-dom";
import { getVideo } from "@/api/api_upload.ts";
import { useEffect, useState } from "react";

function Video() {
  const update = useAppSelector((state) => state.ass.update);
  const dispatch = useAppDispatch();

  const [videoList, setVideoList] = useState([]);

  const Navigate = useNavigate();
  const changeDrawer = () => {
    dispatch(changeDrawerState(true));
  };
  useEffect(() => {
    getVideoList();
  }, [update]);

  const getVideoList = async () => {
    try {
      const res = await getVideo();
      setVideoList(res.data);
    } catch (error) {
      console.log(error);
    }
  };

  const toPage = (id: string) => {
    // 跳转到详情页,传递id
    Navigate(`/video/detail/${id}`);
  };

  return (
    <>
      <div style={{ marginBottom: 15 }}>
        <Button onClick={changeDrawer} type="primary" icon={<PlusOutlined />}>
          添加
        </Button>
      </div>

      <Space>
        {videoList?.map((item) => {
          return (
            <div style={{ width: 250 }} key={item._id}>
              <div className={styles.main}>
                <div className={styles.icon} onClick={() => toPage(item._id)}>
                  <VideoIcon />
                </div>

                <div className={styles.video}></div>
              </div>

              <div>
                <p className={styles.text}>{item.description}</p>
              </div>
            </div>
          );
        })}
      </Space>

      {/* 内容添加弹窗 */}
      <AddContent type="Video" />
    </>
  );
}

export default Video;
